<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="content-type" content="text/html;charset=utf-8">
    <title>Title</title>
    <style type="text/css">
        body,h4 {
            margin: 0;
            padding: 0;
        }
        /*demo01样式 初级*/
        .demo01{
            width:600px;
            position: relative;
            overflow: hidden;
        }
        .demo01 .left {
            width: 100px;
            float: left;

        }
        .demo01 img{
            width: 80px;
            height:80px;
            margin-left: 20px;
            border: 1px solid cornflowerblue;
        }
        .demo01 .right {
            width: 446px;
            margin-left: 10px;
            padding:20px;
            float:right;
            background: lightsteelblue;
            border: 1px solid #ccc;
        }
        .demo01 span {
            position: absolute;
            top: 10px;
            right: 20px;
            font-size: 12px;
        }
        .demo01 p{
            font-size: 12px;
            line-height: 18px;
        }

        /*demo02样式 中级*/
        .demo02 {
            width: 600px;
            position: relative;
            overflow: hidden;
            margin-top:20px;
        }

        .demo02 img{
            float:left;
            width: 80px;
            height: 80px;
            margin-left: 20px;
            border: 1px solid cornflowerblue;
        }

        .demo02 .right {
            width: 446px;
            margin-left: 10px;
            padding: 20px;
            float: right;
            background: lightsteelblue;
            border: 1px solid #ccc;
        }

        .demo02 span {
            position: absolute;
            top: 10px;
            right: 20px;
            font-size: 12px;
        }

        .demo02 p {
            font-size: 12px;
            line-height: 18px;
        }

        /*demo03样式 高级*/
        .demo03 {
            width: 446px;
            margin-top:20px;
            /*向右移动100像素*/
            margin-left: 110px;
            background: lightsteelblue;
            border: 1px solid #ccc;
            padding: 20px;
            position: relative;
        }

        /*图片向左移动100像素，移出图片*/
        .demo03 img{
            width: 80px;
            height: 80px;
            float:left;
            margin-left: -112px;
            margin-top: -20px;
            border: 1px solid cornflowerblue;
        }


        .demo03 span {
            position: absolute;
            top: 10px;
            right: 20px;
            font-size: 12px;
        }

        .demo03 p {
            font-size: 12px;
            line-height: 18px;
        }

    </style>
</head>
<body>
<!--demo01有三个div-->
<div class="demo01">
    <div class="left">
        <img src="images/ds.jpg"/>
    </div>
    <div class="right">
        <h4>樱桃小丸子</h4>
        <p>
            首先在官方下载页下载webstorm，点击安装，然后一直下一步，最后会出现需要注册码界面，
            因为webstorm是商业的IDE，而天朝的屌丝前端当然没那么钱去买那么昂贵的神器了，不用担心，
            我们可以用WebStorm的密钥来学习使用这款前端神器。嘿嘿~~~~</p>
        <span>10分钟前</span>
    </div>
</div>
<div class="demo02">
        <img src="images/ds.jpg"/>
    <div class="right">
        <h4>樱桃小丸子</h4>
        <p>
            首先在官方下载页下载webstorm，点击安装，然后一直下一步，最后会出现需要注册码界面，
            因为webstorm是商业的IDE，而天朝的屌丝前端当然没那么钱去买那么昂贵的神器了，不用担心，
            我们可以用WebStorm的密钥来学习使用这款前端神器。嘿嘿~~~~</p>
        <span>10分钟前</span>
    </div>
</div>
<div class="demo03">
        <img src="images/ds.jpg"/>
        <h4>樱桃小丸子</h4>
        <p>
            首先在官方下载页下载webstorm，点击安装，然后一直下一步，最后会出现需要注册码界面，
            因为webstorm是商业的IDE，而天朝的屌丝前端当然没那么钱去买那么昂贵的神器了，不用担心，
            我们可以用WebStorm的密钥来学习使用这款前端神器。嘿嘿~~~~</p>
        <span>10分钟前</span>
</div>

</body>
</html>